<template>
    <div>
        <el-header style="background-color:whitesmoke">
            <el-select v-model="value" placeholder="学院" style="height: 50px" @change="studentSearch()"clearable>
                <el-option
                        v-for="item in ruleForm"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name+'/'+item.id">
                </el-option>
              </el-select>
            <el-select v-model="major" placeholder="专业" style="height: 50px"@change="studentSearch(),change2()" clearable>
                <el-option
                        v-for="item in MajorInfo"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name+'/'+item.id">
                </el-option>
            </el-select>
            <el-select v-model="grade" placeholder="年级" style="height: 50px" @change="studentSearch()" clearable>
                <el-option
                        v-for="item in GradeInfo"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-document-add" @click="add()">添加学生</el-button>
            <el-button type="primary" icon="el-icon-user-solid" @click="updateStu() ">学生注册</el-button>
            <el-button type="primary" @click="export1()">导出数据<i class="el-icon-download"></i></el-button>
            <el-upload
                    :show-file-list="false"
                    accept="application/vnd.ms-excel"
                    action="http://localhost:8181/student/import"
                    :on-success="fileUploadSuccess"
                    :on-error="fileUploadError"
                    :disabled="fileUploadBtnText=='正在导入'"
                    :before-upload="beforeFileUpload"
                    style="display: inline">
                <el-button  type="success"
                           :loading="fileUploadBtnText=='正在导入'">
                            <i class="el-icon-upload el-icon--right"></i>
                    {{fileUploadBtnText}}
                </el-button>
            </el-upload>
        </el-header>
        <el-form style="width: 40%" :model="StudentInfo">
            <el-form-item label="输入姓名查找学生">
                <el-input v-model="sname">输入姓名查找学生</el-input>
                <el-button  type="primary" icon="el-icon-search" @click="studentSearch1()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="id"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="名称"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="major_name"
                    label="专业"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="college_name"
                    label="学院"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="grade_name"
                    label="年级id"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="iphone"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="px"
                    label="排序"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button  @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="small">修改</el-button>
                    <el-button @click="deleteGrade(scope.row)" type="danger" icon="el-icon-delete"  size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                page-size="2"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>


</template>

<script>
    export default {
        methods: {
            fileUploadSuccess(response, file,fileList){
                if (response){
                    //this.$message({type:response.status,message:response.msg});
                    this.$alert('导入成功', '消息', {
                        confirmButtonText: '确定',
                    })
                    this.fileUploadBtnText='导入数据'
                }
            },
            fileUploadError(err,file,fileList){
                this.$message({type:'error',message:"导入数据！"});
                this.fileUploadBtnText='导入数据';
            },
            beforeFileUpload(file){
                this.fileUploadBtnText='正在导入';
            },

            export1(){
                window.open("http://localhost:8181/student/export","_parent")
            },
            findCollegeName(){
                const _this=this
                axios.get('http://localhost:8181/college/f2').then(function (resp1) {
                    _this.ruleForm = resp1.data
                })
            },
            studentSearch(){
                const _this=this
                this.StudentInfo.college_name=this.value.split('/')[0]
                 this.StudentInfo.major_name=this.major.split('/')[0]
                 this.StudentInfo.grade_name=this.grade
              //   this.StudentInfo.sname=this.sname
                axios.post('http://localhost:8181/student/search/1/9/',_this.StudentInfo).then(function (resp) {
                  //  console.log(_this.value)
                    //console.log(resp)
                    _this.tableData=resp.data.content
                    console.log(resp.data)
                    _this.total=resp.data.totalElements
                })
                //console.log(_this.StudentInfo)
                this.StudentInfo={}
                this.change()
            },
            studentSearch1(){
                const _this=this
                this.StudentInfo.sname=this.sname
                //console.log(this.StudentInfo)
                axios.post('http://localhost:8181/student/search/1/9/',_this.StudentInfo).then(function (resp) {
                    //  console.log(_this.value)
                    //console.log(resp)
                    _this.tableData=resp.data.content
                    console.log(resp.data)
                    _this.total=resp.data.totalElements
                })
                //console.log(_this.StudentInfo)
                this.StudentInfo={}
            },
            change(){
              //  alert(this.key)
                const _this=this
                axios.get('http://localhost:8181/college/getMajorInfoByCollegeId/'+ _this.value.split('/')[1]).then(function (resp) {
                    _this.MajorInfo=resp.data
                 //   console.log(resp.data)
                })
            },
            change2(){
                const _this=this
                //  alert(_this.major)
                axios.get('http://localhost:8181/college/getGradeInfoByMajorId/'+ _this.major.split('/')[1]).then(function (resp) {
                    _this.GradeInfo=resp.data
                })
            },
            updateStu(){
                const _this=this
                axios.get('http://localhost:8181/student/register').then(function (resp) {
                    console.log(resp)
                    _this.$alert('学生注册成功', '成功', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                })
            },
            add(){
                this.$router.push({
                    path:'/addStudent'
                })
            },
            edit(row) {
                this.$router.push({
                    path:'/updateStudent',
                    query:{
                        id:row.id
                    }
                })
            },

            deleteGrade(row){
                const _this=this
                axios.delete('http://localhost:8181/student/deleteStudentById/'+row.id).then(function (resp) {
                    _this.$alert('学生：'+row.id+'删除成功', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            window.location.reload()
                        }
                    });
                })
            },
            page(currentPage){
              //   alert(currentPage)
                currentPage=currentPage-1
                const _this=this
                axios.get('http://localhost:8181/student/search/'+currentPage+'/8/'+'学院').then(function (resp) {
                    _this.tableData=resp.data.content
                    console.log(resp.data)
                    _this.total=resp.data.totalElements
                })
            }
        },
        created() {
            // _this全局的this
            const _this=this
            axios.get('http://localhost:8181/student/search/0/8/'+'学院').then(function (resp) {
                _this.tableData=resp.data.content
                console.log(resp.data)
                _this.total=resp.data.totalElements
            })
            this.findCollegeName()
        },
        data() {
            return {
                fileUploadBtnText:'导入',
                sname:[],
                key:[],
                value:[],
                total:null,
                ruleForm: {
                    id:'12412',
                    name:'fff'
                },
                GradeInfo:[{
                    id:'C1001',
                    name:'软件181',
                    college_id:'A1001',
                    major_id:'B1001'
                },
                    {
                        id:'C1002',
                        name:'软件182',
                        college_id:'A1001',
                        major_id:'B1001'
                    }],
                major:[],
                MajorInfo: [{
                    id:'B1001',
                    name:'软件工程',
                },
                    {
                        id:'B1002',
                        name:'网络工程',
                    }
                ],
                grade:[],
                StudentInfo: {
                    college_name:'',
                    major_name:'',
                    grade_name:'',
                    sname:[],
                },
                tableData: [{
                    id: 'B1001',
                    sname: '软件工程',
                    wx_id: '7',
                    px:'0',
                    major_id:"",
                    grade_id:"",
                    grade_name:'',
                    major_name:'',
                    college_id:'0',
                    college_name:'',
                    iphone:''

                },
                    {
                        id: 'B1002',
                        name: '网络工程',
                        wx_id: '8',
                        px:'0',
                        collegeId:'0'
                    },
                    {
                        id: 'B1003',
                        name: '纺织工程',
                        wx_id: '9',
                        px:'0',
                        collegeId:'0'
                    },
                    {
                        id: 'B1004',
                        name: '机械工程',
                        wx_id: '10',
                        px:'0',
                        collegeId:'0'
                    }
                ]
            }
        }
    }
</script>